import React from 'react';
import * as ReactMixin from "react-mixin";
import Reflux from 'reflux';

import {Control} from "react-keeper";
import Store from "./Store";
import Actions from "./Actions";
import {Button, Flex, List} from "antd-mobile";

import Avatar from '../../../../assets/icon/vote/ywh/avatar.png';

class YwhTp extends React.Component{
  constructor(props) {
    super(props);
    this.doYwhTp = this.doYwhTp.bind(this);
  }

  // 业委会投票
  doYwhTp(data) {
    Actions.ywhVote(data);
  }

  componentWillMount() {
    Actions.initRw(this.props.params.type);
  }

  render() {

    let t = this;
    let content;
    if (t.state.ywhTp.isLoading) {
      content = <div className="no-data-div">加载中...</div>
    } else {
      if (t.state.ywhTp.candidate && t.state.ywhTp.candidate.length > 0) {
        content = t.state.ywhTp.candidate.map(i => (
          <Flex>
            <Flex.Item style={{ padding: '0 0 0 15px', color: '#888', flex: 'none' }}>
              <img src={Avatar} style={{width: '48px', height: '48px'}} />
            </Flex.Item>
            <Flex.Item>
              <List.Item
                extra={
                  t.state.ywhTp.ywhVoteRole ?
                    (
                      t.state.ywhTp.voteResult.voted
                        ?
                        <Button type="primary" size="small" disabled inline>{this.state.ywhTp.voteResult.votedDoorId === i.id ? '已投' : '投他'}</Button>
                        :
                        <Button type="primary" size="small" inline onClick={() => t.doYwhTp(i)}>投他</Button>
                    )
                    :
                    <Button type="primary" size="small" disabled inline>{this.state.ywhTp.voteResult.votedDoorId === i.id ? '已投' : '投他'}</Button>
                }
                multipleLine
              >
                <span>{i.name}</span><span style={{fontSize: '9pt'}}>{"（"+i.building+"栋"+i.unit+"单元"+i.doorplateNo+"）"}</span>
                <List.Item.Brief>
                  {i.extra}
                </List.Item.Brief>
              </List.Item>
            </Flex.Item>
          </Flex>
        ));
      } else {
        content = <div className="no-data-div">暂无候选人</div>
      }
    }

    return (

      <div>
        <List renderHeader={() => this.state.ywhTp.headerContent}>{content}</List>
      </div>
    );
  }
}

ReactMixin.onClass(YwhTp, Reflux.connect(Store, 'ywhTp'));

export default YwhTp;
